<template>
  <div class="item-box">
    <block-header icon="/static/icon/group-icon.png" title="Q群通联" number="198"></block-header>
    <record-group-list :data="converseList" v-if="converseList.length > 0" :loadAll="loadAll"></record-group-list>
    <span v-else class="tip-null">暂无数据</span>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'
  import RecordGroupList from '../../components/record-group-list'
  export default {
    components: {
      BlockHeader,
      RecordGroupList
    },
    props: {
      converseList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
      }
    },
    methods: {
      /**
       * 查看全部
       */
      loadAll() {
        console.log('查看全部')
      }
    }
  }
</script>

<style lang="scss" scoped>

  ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    li {
      height: 85px;
      margin: 0 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;
      p {
        margin: 0;
        font-size: 18px;
      }
      .left {
        flex: 1;
        .mobile {
          color: #5078ac;
          margin-bottom: 5px;
        }
        .name {
          color: #000;
        }
      }
      .right{
        .time{
          text-align: right;
          margin-bottom: 5px;
        }
        .count{
          height: 22px;
          line-height: 22px;
          padding: 0 5px;
          color: #fff;
          background-color: #fe6601;
          text-align: center;
          border-radius: 3px;
          font-size: 15px;
          float: right;
        }
      }
    }
    .lookAll{
      height: 50px;
      line-height: 25px;
      text-align: center;
      font-size: 20px;
      border: 0;
      justify-content: center;
    }
  }
</style>
